<template>
    <div>
        <el-row class="query">
            <el-form :inline="true">
                <el-form-item label="活动标题">
                    <el-input v-model="searchForm.title" :clearable="true" placeholder="可模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input v-model="searchForm.name" :clearable="true"  placeholder="可模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="活动模板">
                    <el-select v-model="searchForm.templateInfoId"
                               clearable
                               placeholder="选择活动模板"
                               :loading="searchForm.loading">
                        <el-option v-for="(value, key) in activityTemplate"
                                   :key="key"
                                   :label="value"
                                   :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="getData">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="table">
            <el-table :data="tableData"
                      border
                      align="center"
                      :row-style="{height:'150px'}"
                      header-align="center"
                      width="100%"
                      style="text-align: center;"
                      tooltip-effect="dark">
                <el-table-column type="index"
                                 width="50">
                </el-table-column>
                <el-table-column prop="id"
                                 label="id"
                                 width="50">
                </el-table-column>
                <el-table-column prop="templateInfoId"
                                 label="模板编号"
                                 width="70">
                </el-table-column>
                <el-table-column label="前台链接"
                                 width="150">
                    <template slot-scope="scope">
                        <a class="activityLink"
                           :href="scope.row.foregroundLink"
                           target="_blank">
                            {{scope.row.foregroundLink}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="typeIdentification"
                                 label="类型标识"
                                 width="90">
                </el-table-column>
                <el-table-column prop="title"
                                 label="标题"
                                 width="150">
                </el-table-column>
                <el-table-column prop="name"
                                 label="活动名称"
                                 width="150">
                </el-table-column>
                <el-table-column prop="identifier"
                                 label="活动标识"
                                 width="90">
                </el-table-column>
                <el-table-column prop="showParticipant"
                                 label="是否显示参与人数"
                                 :formatter="isShowParticipantFormat"
                                 width="150">
                </el-table-column>
                <el-table-column prop="participantNum"
                                 label="初始参与人数"
                                 width="150">
                </el-table-column>
                <el-table-column prop="createBy"
                                 label="活动创建人"
                                 width="100">
                </el-table-column>
                <el-table-column prop="createTime"
                                 label="创建时间"
                                 :formatter="timeFormat"
                                 width="160">
                </el-table-column>
                <el-table-column prop="beginTime"
                                 label="开始时间"
                                 :formatter="timeFormat"
                                 width="160">
                </el-table-column>
                <el-table-column prop="endTime"
                                 label="结束时间"
                                 :formatter="timeFormat"
                                 width="160">
                </el-table-column>
                <el-table-column prop="state"
                                 label="活动状态"
                                 :formatter="stateFormat"
                                 width="80">
                </el-table-column>
                <el-table-column prop="description"
                                 label="活动说明"
                                 width="150"
                                 :show-overflow-tooltip="showOverflowTooltip">
                </el-table-column>
                <el-table-column prop="status"
                                 label="数据状态"
                                 :formatter="statusFormat"
                                 width="80">
                </el-table-column>
                <el-table-column width="210"
                                 fixed="right"
                                 align="left"
                                 label="操作"
                >
                    <template slot-scope="scope">
                        <el-button class="pan-btn red-btn first-button"
                                   @click="deleteHandle(scope.row, scope.$index)">删除
                        </el-button>
                        <!--<el-button class="pan-btn green-btn" @click="showDetail(scope.row)">详情</el-button>-->
                        <el-button class="pan-btn tiffany-btn"
                                   @click="editHandle(scope.row, scope.$index)">编辑
                        </el-button>
                        <el-button class="pan-btn green-btn"
                                   @click="addOrDownHandle(scope.row, scope.$index)">{{ !scope.row.releaseFlag ? '上架' :
                            '下架' }}
                        </el-button>
                        <el-button class="pan-btn pink-btn"
                                   v-if="scope.row.status == 0"
                                   @click="sendHandle(scope.row, scope.$index)">发布
                        </el-button>
                        <el-button class="pan-btn yellow-btn"
                                   v-if="scope.row.status == 1&&scope.row.typeIdentification==='tournamentguess'"
                                   @click="sendLottery(scope.row, scope.$index)">
                            {{JSON.parse(scope.row.advancedSetting).finished ||
                            lotteryInfo.finished?'已开奖':(JSON.parse(scope.row.advancedSetting).finished===false ||
                            lotteryInfo.finished===false?'待开奖':'未开奖')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-pagination @current-change="handleCurrentChange"
                               :page-size="10"
                               layout="prev, pager, next, jumper"
                               :total=total>
                </el-pagination>
            </div>
        </el-row>
        <el-dialog :visible.sync="modifyQuestionnaire">
            <div>111</div>
        </el-dialog>
        <el-dialog
            :title="lotteryInfo.finished?'赛事已开奖':(lotteryInfo.finished===false?'赛事开奖中(请稍等)':'选择胜出方开奖')"
            :visible.sync="centerDialogVisible"
            width="40%"
            center
            @close="resetLottery">
            <el-row>
                <el-radio-group size="medium" v-model="LotteryType">
                    <el-col :span="11" :offset="0">
                        <el-card :body-style="{ padding: 0 }">
                            <el-radio label="left" :disabled="lotteryInfo.finished">
                                <img style="width: 100% ;height: 100%;"
                                     :src="'/activityConsole/staticResources/'+lotteryInfo.topic1Image_pc"
                                     class="image"/>
                                <p>左侧胜出</p>
                            </el-radio>
                        </el-card>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-card :body-style="{ padding: 0 }">
                            <el-radio label="right" :disabled="lotteryInfo.finished">
                                <img style="width: 100% ;height: 100%;"
                                     :src="'/activityConsole/staticResources/'+lotteryInfo.topic2Image_pc"
                                     class="image"/>
                                <p>右侧胜出</p>
                            </el-radio>
                        </el-card>
                    </el-col>
                </el-radio-group>
            </el-row>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="resetLottery">取 消</el-button>
                 <el-button type="primary" :disabled="lotteryInfo.finished" @click="confirmLottery">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
    import request from '@/utils/request'
    import {parseTime} from '@/utils/index'

    export default {
        name: 'ActivityList',
        data() {
            return {
                tableData: [],
                searchForm: {
                    pageIndex: 1,
                    pageNum: 10,
                    name: '',
                    title: '',
                    templateInfoId: '',
                    loading: true
                },
                activityTemplate: {},
                total: 0,
                /*开奖弹框展示状态*/
                modifyQuestionnaire: false,
                showOverflowTooltip: true,
                centerDialogVisible: false,
                lotteryInfo: [],/*赛事开奖信息*/
                LotteryType: ''/*胜出方*/
            }
        },
        mounted() {
            const _this = this;
            _this.$nextTick(function () {
                _this.getData();
            })
            _this.getAllTemplate();
        },
        methods: {
            // 分页数据
            getData() {
                const _this = this;
                request({
                    url: '/activityConsole/activity/info',
                    method: 'get',
                    params: _this.searchForm
                }).then(res => {
                    if (res.status == 200) {
                        _this.tableData = res.data;
                        _this.total = parseInt(res.description)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            getAllTemplate() {
                let _this = this;
                _this.searchForm.loading = true;
                _this.axios({
                    url: '/activityConsole/activity/template/info/all'
                }).then(res => {
                    _this.activityTemplate = res.data.data;
                    _this.searchForm.loading = false;
                }).catch(e => {
                    _this.searchForm.loading = false;
                    console.log(e);
                })
            },
            handleCurrentChange(val) {
                this.searchForm.pageIndex = parseInt(val);
                this.getData()
            },
            timeFormat(row, column) {
                const date = row[column.property];
                return parseTime(date)
            },
            // 是否显示参与人数
            isShowParticipantFormat(row, column) {
                const type = row[column.property];
                if (!type) {
                    return '隐藏'
                }
                if (type) {
                    return '展示'
                }
            },
            stateFormat(row, column) {
                const type = row[column.property];
                if (type == 0) {
                    return '未开始'
                }
                if (type == 1) {
                    return '进行中'
                }
                if (type == 2) {
                    return '已结束'
                }
            },
            statusFormat(row, column) {
                const type = row[column.property];
                if (type == 0) {
                    return '未发布'
                }
                if (type == 1) {
                    return '已发布'
                }
                if (type == 2) {
                    return '已删除'
                }
            },
            // 删除
            deleteHandle(row, index) {
                const _this = this;
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'green-btn pan-btn',
                    type: 'warning'
                }).then(() => {
                    request({
                        url: '/activityConsole/activity/info/id/' + row.id,
                        method: 'delete'
                    }).then(res => {
                        console.log(res);
                        if (res.deleteFlag) {
                            _this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            _this.tableData.splice(index, 1)
                            // _this.getData();
                        } else {
                            _this.$message({
                                type: 'error',
                                message: '删除失败'
                            })
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 编辑
            editHandle(row, index) {
                console.log(row, index);
                this.$router.push({path: '/template-edit/TemplateEdit?activityId=' + row.id + '&templateId=' + row.templateInfoId + '&type=' + row.typeIdentification + '&editFlag=true'})
            },
            // 发布
            sendHandle(row, index) {
                console.log(row);
                const _this = this;
                if (row.typeIdentification =='bargain'){
                    console.log("bargain");
                    request({
                        url: '/activityConsole/activity/info/barGain/' + row.id,
                        method: 'post'
                    }).then(res => {
                        console.log(res);
                        if (res.status == 200) {
                            _this.tableData[index].status = 1;
                            _this.tableData[index].foregroundLink = res.data
                        }
                        _this.$message({
                            type: 'success',
                            message: res.description
                        })
                    }).catch(err => {
                        console.log(err)
                    })
                }else {
                    request({
                        url: '/activityConsole/activity/info/id/' + row.id,
                        method: 'post'
                    }).then(res => {
                        console.log(res);
                        if (res.status == 200) {
                            _this.tableData[index].status = 1;
                            _this.tableData[index].foregroundLink = res.data
                        }
                        _this.$message({
                            type: 'success',
                            message: res.description
                        })
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            // 开奖
            sendLottery(row, index) {
                const _this = this;
                _this.centerDialogVisible = true;
                if (row.advancedSetting) {
                    /*有高级设置*/
                    _this.lotteryInfo = JSON.parse(row.advancedSetting);
                    /*赋值活动id*/
                    _this.lotteryInfo._id = row.id;
                    _this.lotteryInfo._index = index;
                    /*赛事已开奖*/
                    if (_this.lotteryInfo.finished) {
                        /*哪方胜出*/
                        _this.LotteryType = _this.lotteryInfo.win;
                    }
                }
            },
            //关闭开奖
            resetLottery() {
                this.centerDialogVisible = false;
                this.LotteryType = '';
            },
            /*确认开奖*/
            confirmLottery() {
                const _this = this;
                if (!_this.LotteryType) {
                    _this.$message({
                        type: 'error',
                        message: '请先选择胜出方'
                    });
                    return;
                }
                if (_this.lotteryInfo.finished) {
                    _this.$message({
                        type: 'info',
                        message: '活动已经开奖，请勿重复开奖'
                    });
                    return;
                }
                request({
                    url: '/activityConsole/activity/guess/id/' + _this.lotteryInfo._id,
                    method: 'post',
                    params: {
                        type: _this.LotteryType
                        // 'left right'
                    }
                }).then(res => {
                    console.log(res);
                    if (res.status == 200 || res.status == 'SUCCESS') {
                        _this.centerDialogVisible = false;
                        _this.lotteryInfo.finished = false;
                        _this.lotteryInfo.win = _this.LotteryType;
                        _this.tableData[_this.lotteryInfo._index].advancedSetting = JSON.stringify(_this.lotteryInfo);
                        _this.LotteryType = '';
                    }
                    _this.$message({
                        type: 'success',
                        message: res.description
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            // 上架下架
            addOrDownHandle(row) {
                const _this = this;
                request({
                    url: '/activityConsole/activity/info/id/' + row.id + '/run-or-pause',
                    method: 'post',
                    params: {
                        flag: !row.releaseFlag
                    }
                }).then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        row.releaseFlag = !row.releaseFlag;
                        _this.$message({
                            type: 'success',
                            message: res.description
                        })
                    } else {
                        _this.$message({
                            type: 'error',
                            message: res.description
                        })
                    }
                })
            }
        }
    }

</script>
<style scoped>

    .query {
        margin: 20px 0 0 20px;
    }

    .table {
        margin: 0 20px 20px;
    }

    .footer {
        text-align: center;
        margin: 10px auto;
    }

    .first-button{
        margin-left: 10px;
    }

    .el-table td {
        padding: 0;
    }

    .pan-btn {
        margin-bottom: 10px;
        color: #ffffff;
    }

    /deep/ .el-radio.is-checked {
        border: 1px solid #409EFF;
        border-radius: 5px;
    }

    /deep/ .el-radio__input {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 10;
    }

    /deep/ .el-radio__label {
        padding-left: 0;
        text-align: center
    }

    .activityLink {
        cursor: pointer;
        color: #409eff;
    }

    a.activityLink:hover {
        text-decoration: underline !important;
    }
</style>
